<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Vue App</title>

  <script src="./vue-rels/vue2.js"></script>
  <!--必须在vue2.js后引入element-ui.js -->
  <!-- <script src="./vue-rels/element-ui.js"></script> -->
  <script src="api.js"></script>
  <script src="./vue-rels/x_component.js"></script>
 <link rel="stylesheet" href="./vue-rels/x_component.css">  

  <style>
    body {
      display: flex;
      justify-content: center; /* 水平居中 */
      margin: 0;
      height: 100vh; /* 确保整个视窗高度 */
    }
  </style>
</head>
<body>
  <div id="app">
    <table id="content" style="width: 600px;">
      <tr><td colspan="3"><h2>云南省疾病预防控制中心游泳池水现场采样原始记录表</h2></td><tr>
      <tr><td style="width: 80px;">样品编号:</td><td colspan="2"><input v-model="data.sampleno"></input></td></tr>
      <tr><td>被检单位:</td><td colspan="2"><input v-model="data.inspectedunit"></input></td></tr>
      <tr>
        <td>场所名称:</td>
        <td>样品数量: <input v-model="data.samplequantity"></input></td>
        <td>采样日期: <input v-model="data.samplingdate"></input></td>
      </tr>
      <tr>
        <td>检验依据:</td>
        <td colspan="2">
             <!-- <x-checkbox :options="[ { value: 'inspectionbasistype', label: '《公共场所卫生检验方法（GB/T18204-2013）》' },
                                     { value: 'inspectionbasistype2', label: '《游泳池水微生物检验方法（GB/T 18204-2000）》'}]" 
             :data="data" :statarr="[2,3]" ></x-checkbox> -->
             <div>《公共场所卫生检验方法（GB/T18204-2013）》<input type="checkbox" v-model="data.inspectionbasistypeFlag"></input></div>
             <div>《游泳池水微生物检验方法（GB/T 18204-2000）》<input type="checkbox" v-model="data.inspectionbasistype2Flag"></input></div>
        </td>
      </tr>
    </table>

    
  </br>  
  </br>  

    <!--子表格组件-->
    <h2>游泳池水水样现场采样记录表</h2>
    <sub-table :tabledata="data.details">

    </sub-table>


  </br>
  </br>
    
    <div>
        <button @click="submitData()">提交更改</button> &nbsp;
        <button @click="insertNewRecord()">新增一行</button> &nbsp;
        <button @click="showData()">查看数据</button>&nbsp;
        <button @click="modChange()">模式切换</button>
    </div>

  </div>

  <script>
    // 申明子表格组件
    //["名称","类型","级别","法人"]
    var pageMode='edit'
    var config=[{title:"样品编号",field:"sampleid"},
                {title:"样品数量(ml)",width:"150px",field:"samplequantity"},
                {title:"样品性状",field:"samplecharacterTrsf", width:"100px",   content:'<div>是否转换<input type="checkbox"></input></div>' },
                {title:"备注",field:"remarks"}]
    //私有导入并且创建组件实例1            
    var subTableComponent=getSubTableComponent(config,pageMode)
   

    //构建vue实例
    var app = new Vue({
      el: '#app',
      data:function() {
        return {
        data:
          {
          "sampleno": "",
          "inspectedunit": "",
          "locationname": "",
          "samplequantity": 0,
          "samplingdate": "",
          "inspectionbasistype": "0",
          "inspectionbasistype2":"1",
          "details": []
        },
        pageMode:pageMode,
        selectedOptions: ['option1'],
        innerOptions:[ { value: 'option1', label: 'wwwww选1' },{ value: 'option2', label: 'wwww选2' }]
      }},
      methods: {
        submitData:function(){
          submitChangeData('共通表格编辑',{data:app.data},function(data){
            console.log("rs",data)
            if(data.code==0){
                alert('提交成功');
            }else{
                alert('提交失败');
            }
        })
        }
      }   
    ,
      components:{
        "sub-table":subTableComponent
      },
      computed:{
        test:function(){
          //do anything
        }
      },
      methods: {
        insertNewRecord:function(){
          app.data.details.push({sampleid:"",samplequantity:"",samplecharacter:"",remarks:"",operType:"2"})
        },
        showData:function(){
          console.log(app.data)
          console.log(JSON.stringify(app.data.details))
        },
        modChange:function(){
          console.log(this.pageMode)
          if(this.pageMode=='edit'){
            this.pageMode='read'
          }else{
            this.pageMode='edit'
          }
          pageModeInit(this.pageMode,this.$el)
        },
        //提交变更数据
        submitData:function(){
         
          submitData('泳池现场采样管理增删改',{data:this.data},function(data){
            console.log("rs",data)
            if(data.code==0){
                alert('提交成功');
            }else{
                alert('提交失败');
            }
        })
    }   
      },
      mounted:function() {
        //控制页面只读还是编辑模式
        pageModeInit(this.pageMode,this.$el)
      },
    });

    //异步初始化数据
    fetchData('泳池现场采样管理查询',{requestParam:{id:1}},function(data){
      app.data=data.data;
      app.data.inspectionbasistype2="3";
      //为数据注册扩展checkbox扩展关联布尔值属性 实现checkbox点击属自更新
      extendObField(app.data.details,'samplecharacter','samplecharacterTrsf',{"11":false,"22":true})
      extendObField(app.data,'inspectionbasistype','inspectionbasistypeFlag',{"2":false,"3":true})
      extendObField(app.data,'inspectionbasistype2','inspectionbasistype2Flag',{"2":false,"3":true})
      
    });

    
    
   
  </script>
</body>
</html>